<template>
  <div class="medical-services">
    <div class="search">
      <el-form :inline="true" label-position="right" :model="formData" ref="validateForm">
        <div class="line">
          <el-form-item label="时间">
            <el-date-picker
              name="pub-time"
              v-model="formData.time"
              type="month"
              value-format="yyyy-MM"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="险种">
            <el-select
              v-model="formData.insuranceType"
              placeholder="请选择险种"
              clearable
            >
              <el-option
                v-for="item in insuranceTypes"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="就诊类型">
            <el-select
              v-model="formData.medicalType"
              placeholder="请选择就诊类型"
              clearable
            >
              <el-option
                v-for="item in medicalTypes"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item label="诊疗项目名称">
            <el-input placeholder="请输入诊疗项目名称" v-model="formData.medicalName" clearable></el-input>
          </el-form-item>
          <el-form-item class="confirm-reset">
            <el-button class="reset" @click="resetClick">重置</el-button>
            <el-button type="primary" class="confirm" @click="searchClick">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table-list">
      <div class="title-content">
        <div class="title">医疗服务项目费用结算分析</div>
        <el-button type="primary" class="export" @click="exportClick">导出</el-button>
      </div>
      <!-- <div class="table-content">
        <el-table :data="tableData.list" border style="width: 100%;"
        @sort-change="tableSortChange"
        v-loading="loading"
        max-height="550"
        >
          <el-table-column
            v-for="item of tableData.header"
            :key="item.engColName"
            :prop="item.engColName"
            :label="item.chnColName"
            :sortable="item.sort==1?'custom':false"
            :width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="operationRow(scope.row.id)"
                type="text"
                style="width:100%"
                size="small">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.totalDataCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </pagination> -->
      <Table :tableData="tableData" :loading="loading" @pageChange="pageChange" :pageIndex="pageIndex" @current="currentIndex"></Table>
    </div>
  </div>
</template>

<script>
import Table from "@/components/medicalAnalysis/Table.vue";
// import Pagination from "@/components/Pagination.vue"
// import { 
//   treatmentServDict, 
//   treatmentServList 
//   } from "@/api/index.js"
export default {
  components: {
    // Pagination,
    Table
  },
  data() {
    return {
      formData: {
        time: "",
        insuranceType: "",
        medicalType: "",
        medicalName: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      sort: "", //排序字段 按照field1 asc, field2 desc格式展示
      currentPage: 1,
      pageSize: 10, //每页展示条数
      loading: false,
      pageIndex: 0,
      insuranceTypes: [
        {
          dictCode: "1",
          dictValue: "甲类",
        },
        {
          dictCode: "2",
          dictValue: "乙类",
        },
        {
          dictCode: "3",
          dictValue: "丙类",
        },
      ],
      medicalTypes: [
        {
          dictCode: "1",
          dictValue: "增补",
        },
        {
          dictCode: "2",
          dictValue: "废止",
        },
      ],
      tableData: {
        header:[
          {chnColName:"项目编码", engColName:"itemCode", sort:0},  //sort：0 非排序字段  1 需要排序的字段
          {chnColName:"物价编码", engColName:"pricCode", sort:0},
          {chnColName:"项目名称", engColName:"itemName", sort:0},
          {chnColName:"项目内容（内涵）", engColName:"itemCont", sort:0},
          {chnColName:"除外内容", engColName:"exctCont", sort:0},
          {chnColName:"计价单位", engColName:"prcunt", sort:0},
          {chnColName:"计价说明", engColName:"pricDscr", sort:0},
          {chnColName:"项目价格（元）", engColName:"itemPric", sort:1},
          {chnColName:"医保类别", engColName:"medinscat", sort:0},
          {chnColName:"工伤保险类别", engColName:"injrInsuType", sort:0},
          {chnColName:"有效标志", engColName:"valiFlag", sort:0},
          {chnColName:"政策文件编号", engColName:"polFileNo", sort:0},
          {chnColName:"政策文件名称", engColName:"polFileName", sort:0},
          {chnColName:"政策发布时间", engColName:"polFilePubdTime", sort:1},
          {chnColName:"备注", engColName:"memo", sort:0}
        ],
        list:[
          {
            id:1,
            itemCode:"项目编码123", 
            pricCode:"xxxx", 
            itemName:"xxxx", 
            itemCont:"xxxx", 
            exctCont:"xxxx", 
            prcunt:"xxxx", 
            pricDscr:"xxxx", 
            itemPric:"xxxx", 
            medinscat:"xxxx", 
            injrInsuType:"xxxx", 
            valiFlag:"xxxx", 
            polFileNo:"xxxx", 
            polFileName:"aadfaste", 
            polFilePubdTime:"xxxx", 
            memo:"xxxx",
          },
          {
            id:2,
            itemCode:"bbb", 
            pricCode:"aaaa", 
            itemName:"aaaa", 
            itemCont:"aaaa", 
            exctCont:"aaaa", 
            prcunt:"aaaa", 
            pricDscr:"aaaa", 
            itemPric:"aaaa", 
            medinscat:"aaaa", 
            injrInsuType:"aaaa", 
            valiFlag:"aaaa", 
            polFileNo:"aaaa", 
            polFileName:"xxxxxxxxx", 
            polFilePubdTime:"aaaa", 
            memo:"aaaa",
          }
        ],
        totalDataCount: 71,
      },
    };
  },
  mounted() {
    this.searchClick();
  },
  methods: {
    // 排序
    // tableSortChange(val) {
    //   this.sort = val.order == "ascending"?val.prop+" " +"asc":val.order == "descending"?val.prop+" " +"desc":"";
    //   this.searchList();
    // },
    // 重置
    resetClick() {
      this.formData= {
        time: "",
        insuranceType: "",
        medicalType: "",
        medicalName: "",
      },
      this.sort = "";
    },
    searchClick() {
      this.currentPage = 1;
      this.searchData = JSON.parse(JSON.stringify(this.formData))
      this.searchList();
    },
    searchList() {
      this.loading = true; //加载中。。。
      const params = {
        ...this.searchData,
        pagenum: this.currentPage,
        pagecount: this.pageSize,
        sort: this.sort
      }
      console.log("111111",params);
      this.loading = false;
      // treatmentServList(params).then(res=>{
      //   // console.log("ssssssssssssssss",res);
      //   this.tableData = res.data;
      //   this.loading = false;
      // }).catch(err=>{
      //   console.log(err);
      // })
    },
    // // 页码-每页**条
    // handleSizeChange(val) {
    //   this.pageSize = val;
    //   this.currentPage = 1;
    //   this.searchList();
    // },
    // // 页码-当前**页
    // handleCurrentChange(val) {
    //   this.currentPage = val;
    //   this.searchList();
    // },
    pageChange(val) {
      console.log("pageChange===",val);
      this.sort = val.sort;
      this.currentPage = val.currentPage;
      this.pageSize = val.pageSize;
      this.searchList()
    },
    currentIndex(index) {
      console.log("iiiii",index+1);
      this.$emit('current', index+1);
    },
    operationRow(rowId) {
      console.log("rrrrrrrrrr",rowId);
      this.$emit("current",1)
    },
    exportClick() {
      console.log("导出。。。。。");
    }
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/common/global_deep_style.less");
@import url("./index.less");

// .medical-services {
//   background: #f5f7fa;
//   margin: 16px;
//   .search {
//     background: #fff;
//     box-sizing: border-box;
//     position: relative;
//     padding-top: 16px;
//     .content-pric {
//       font-size: 13px;
//       color: #B0B4BD;
//       ::v-deep .el-input {
//         width: 79px;
//         .el-input__inner {
//           width: 79px;
//           padding-right: 16px;
//         }
//       }
//     }
//     .confirm-reset {
//       position: absolute;
//       height: 40px;
//       bottom: 0;
//       right: 0;
//       ::v-deep .el-form-item__content {
//         top: 50%;
//         transform: translateY(-50%);
//       }
//       .reset {
//         float: left;
//       }
//       .confirm {
//         margin-right: 0 !important;
//       }
//     }
//   }
//   .table-list {
//     margin-top: 12px;
//     padding-bottom: 20px;
//     border-radius: 4px;
//     background: #fff;
//     .title-content {
//       height: 50px;
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       padding-right: 20px;
//       .title {
//         height: 16px;
//         margin-left: 10px;
//         font-family: "PingFangSC-Semibold";
//         font-size: 16px;
//         color: #303133;
//         letter-spacing: 0;
//         line-height: 16px;
//         font-weight: bold;
//         &::before {
//           content: "";
//           width: 4px;
//           height: 14px;
//           background: #0160c0;
//           float: left;
//           margin-top: 1px;
//           margin-right: 4px;
//         }
//       }
//       .export {
//         margin-right: 0;
//       }
//     }
//     .table-content {
//       padding: 0 20px;
//       box-sizing: border-box;
//     }
//   }
// }
</style>